<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="webuploader-0.1.5/webuploader.css">
    <title>VUE  webuploader试验案例</title>
    <style>
        .margin-bottom {margin-bottom: 5px;}
        .list-group-item{cursor: pointer}
        .list-group-item:hover{background:#f2f2f2;}
        .webuploader-pick{background:#337ab7;}
        #picker{padding-left:30px;}
    </style>
</head>
<body>
<div class="container" id="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    VUE WebUploader 试验案例
                </div>
                <div class="panel-body">
                    <div id="todo-list-example">
                        <ul class="list-group  text-center">

                            <template v-for="(item, index) in lists">
                                <li
                                        class="list-group-item"
                                        @click="doThis(index)"
                                        v-text="item.title"
                                        :class="{active:currentIndex==index}"
                                ></li>
                             </template>



                            <li class="list-group-item text-success" @click="addItem">点我添加新的菜单</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-8">
            <!--组件-->
                new
        </div>
    </div>

</div>
<script type="text/x-template" id="imagepicker">
    <div class="panel panel-primary">
        <div class="panel-heading">
            右侧详情
        </div>
        <div class="panel-body">
            <div class="row">
                <input type="text" class="form-control" v-model="item.title">
            </div>
            <div class="row">
                <img :src="item.imgurl" alt="">
            </div>
            <div class="row">
                <div class="upload-wrapper">
                    <div id="picker">选择文件</div>
                </div>
            </div>
        </div>
    </div>

</script>
<script src="js/vue.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="webuploader-0.1.5/webuploader.min.js"></script>
<script>
+function($,Vue){
    "use strict";
    function register_img_picker(){
        Vue.component('imgPicker',{
            template:'#imagepicker',
            props:['item'],
            data:function(){
                return {
                    litem:this.item

                }
            },
            methods:{
                initUploader:function(){
                    var _s=this;
                    this.uploader = WebUploader.create({
                        // swf文件路径
                        swf: 'js/Uploader.swf',
                        // 文件接收服务端。
                        server: 'http://www.jiazhi.com/fex-team-webuploader-5ba5c80/server/fileupload.php',
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#picker',
                        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        resize: false,
                        auto:true,
                        duplicate:true
                    });

                    this.uploader.on( 'uploadSuccess', function( file,obj ) {
                        var _base_url = 'http://www.jiazhi.com/fex-team-webuploader-5ba5c80/server/upload/';
                       var _tmpUrl=_base_url+ file.name;
                       _s.$emit("ci",_tmpUrl );

                        console.log("上传成功:");
                        console.log(file,obj);
                    });


                    // 文件上传过程中创建进度条实时显示。
                    this.uploader.on( 'uploadProgress', function( file, percentage ) {
                        console.log("正在上传...");
                        console.log(file,percentage);
                    });

                    this.uploader.on( 'uploadComplete', function( file ) {
                        console.log("已结束~");
                       console.log(file);
                    });


                }

            },
            mounted:function(){
                this.initUploader();

            }

        });

    }

    function start_root(){

        new Vue({
            el: '#container',
            data: {
                currentIndex:0,
                lists :[
                    {
                        id:'001',
                        title:'标题1',
                        imgurl:'',
                        link:'',
                        order:''

                    },
                    {
                        id:'001',
                        title:'标题2',
                        imgurl:'',
                        link:'',
                        order:''

                    },
                    {
                        id:'001',
                        title:'标题3',
                        imgurl:'',
                        link:'',
                        order:''

                    }
                ]
            },
            methods: {
                doThis:function (idx) {
                    this.currentIndex = idx;
                },
                addItem:function(){

                    var o={
                        id:'001',
                        title:'标题1',
                        imgurl:'',
                        link:'',
                        order:''
                    };
                    this.lists.push(o);
                },

                changeImg:function(url){
                    console.log("吼吼吼",url);
                    this.lists[this.currentIndex].imgurl = url;
                }

            },
            computed:{
                citem:function(){
                    return this.lists[this.currentIndex];
                }
            },
            mounted:function(){

            }
        });
    }


    $(function(){
        register_img_picker();
        start_root();
    });


}(jQuery,Vue);
</script>
</body>
</html>